﻿@page "/DateTime-Picker/Date-Time-Range"

@using Syncfusion.Blazor.Calendars

@inherits SampleBaseComponent;

<SampleDescription>
   <p>In the following sample, a specific datetime ranges from 7th 10:00 AM to 27th 10:30 PM of the current month has been set to select from the Calendar. All the other dates are out of range and <code>restricted</code> to set or select.</p>
</SampleDescription>
<ActionDescription>
    <p>Date Range sample explains the date selection within the specific range in a calendar and time popup list by using <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateTimePickerModel-1.html#Syncfusion_Blazor_Calendars_DateTimePickerModel_1_Min' target='_blank'> Min</a> and <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateTimePickerModel-1.html#Syncfusion_Blazor_Calendars_DateTimePickerModel_1_Max' target='_blank'> Max</a> properties. Here, the date selection range was restricted within a range from 7th 10:00 AM to 27th 10:30 PM days in a month.</p>
    <p>More information on the datetime range configuration can be found in the <a href='https://blazor.syncfusion.com/documentation/datetime-picker/date-time-range/' target='_blank'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div id="wrapper" class="datetimepicker-section">
        <div id="datetimepicker-control">
            <SfDateTimePicker TValue="DateTime?" Value="@DateTimeValue" Min="@MinDate" Max="@MaxDate"></SfDateTimePicker>
        </div>
    </div>
</div>

<style>
    #wrapper {
        max-width: 300px;
        margin: 0px auto;
        padding-top: 20px;
    }
</style>

@code{
    public DateTime DateTimeValue { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 09, 11, 00, 00);
    public DateTime MinDate { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 07, 10, 00, 00);
    public DateTime MaxDate { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 27, 22, 30, 00);
}